<script setup lang="ts">
import CSSBox from "../components/CSSBox.vue";
import { ref, computed, onMounted } from "vue";
import { G_getSquareDom } from "src/pioneers/Gab/utils/tool";

const isClose = ref(true);

const loaderClass = computed(() => {
  return isClose.value ? "loader-close" : "loader-open";
});

const loaderDom = ref<HTMLDivElement>();

function changeLoader() {
  isClose.value = !isClose.value;
}

onMounted(() => {
  G_getSquareDom(loaderDom.value!);
});
</script>

<template>
  <CSSBox :TYPE="'JS'">
    <div
      ref="loaderDom"
      :class="loaderClass"
      class="loader-wrapper relative overflow-hidden flex justify-center items-center w-full h-full"
    >
      <div class="loader relative">
        <span class="scan">
          <div class="scan-shadow"></div>
        </span>
        <div class="loader-ring">
          <div class="loader-ring">
            <div
              @click="changeLoader"
              class="panel-wrapper absolute top-0 left-0 inset-0 box-border flex justify-center items-center"
            ></div>
          </div>
        </div>
      </div>
    </div>
  </CSSBox>
</template>

<style lang="less" scoped>
.loader-wrapper {
  box-sizing: border-box;
  padding: 1rem;
  transition: all 0.2s;
  min-width: 10rem;
  min-height: 10rem;
  .loader {
    aspect-ratio: 1;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-sizing: border-box;
    box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.25);
    border: 2px solid #222;
    overflow: hidden;
    box-sizing: border-box;
    &::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 2px;
      top: 50%;
      left: 0;
      background-color: #222;
      z-index: 0;
    }
    &::before {
      content: "";
      position: absolute;
      width: 2px;
      height: 100%;
      left: 50%;
      top: 0;
      background-color: #222;
      z-index: 0;
    }
    .scan {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 50%;
      height: 100%;
      transform-origin: top left;
      overflow: hidden;
      animation: scan 2s linear infinite;
      transition: all 0.25s;
      border-left: 1px solid rgba(0, 162, 255, 0.637);
      z-index: 2;
      .scan-shadow {
        position: absolute;
        top: 5rem;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #87bdf5;
        transform-origin: top left;
        transform: rotate(35deg);
        animation: scan-close 1s linear;
        filter: blur(2rem) drop-shadow(5rem 5rem 5rem #87bdf5);
        opacity: 0.75;
      }
    }
    .loader-ring {
      position: absolute;
      inset: 1rem;
      border-radius: 50%;
      border: 2px solid #222;
      aspect-ratio: 1;
      box-shadow: inset 0rem 0rem 2rem rgba(0, 0, 0, 0.25);
      z-index: 10;
      transition: all 0.15s;
      .panel-wrapper {
        border-radius: 50%;
        background-color: #1f1f1f;
        box-shadow: inset 0rem 0rem 1.5rem rgba(0, 0, 0, 0.25);
        flex-direction: column;
        font-weight: bold;
        overflow: hidden;
        cursor: pointer;
      }
    }
  }
  &.loader-close {
    min-width: 10rem;
    min-height: 10rem;
    .loader-ring {
      inset: 2.5rem;
    }
    .loader {
      .scan {
        animation-play-state: running;
        .scan-shadow {
          transform: rotate(35deg);
          animation: scan-open 0.5s linear;
          opacity: 0.75;
        }
      }
    }
  }
  &.loader-open {
    min-width: 24rem;
    min-height: 24rem;
    .loader {
      .scan {
        border-left: 1px solid rgba(0, 162, 255, 0) !important;
        .scan-shadow {
          transform: rotate(90deg);
          animation: scan-close 0.5s linear;
          opacity: 0;
        }
      }
    }
  }
}
// *************************keyframes*************************
@keyframes bar-init {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes shadow-bar-init {
  0% {
    box-shadow: 0rem 0rem 0rem rgba(0, 0, 0, 0);
  }
  7.5% {
    box-shadow: 0rem 0rem 2rem rgba(0, 0, 0, 0.25);
  }
  33% {
    box-shadow: -5rem 0rem 5rem rgba(0, 0, 0, 0.75);
  }
  75% {
    box-shadow: -5rem 0rem 5rem rgba(0, 0, 0, 0.33);
  }
  100% {
    box-shadow: -5rem 0rem 5rem rgba(0, 0, 0, 0);
  }
}
@keyframes layer-init {
  0% {
    width: 0;
  }
  75%,
  100% {
    width: 100%;
  }
}
@keyframes logo-init {
  0% {
    transform: translateX(35%);
  }
  75%,
  100% {
    transform: translateX(0);
  }
}
@keyframes layer-animatino {
  0% {
    left: 0;
  }
  75%,
  100% {
    left: 100%;
  }
}
@keyframes layer-bar {
  0% {
    left: 0;
  }
  75%,
  100% {
    left: 100%;
  }
}
@keyframes scan-open {
  0% {
    transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    transform: rotate(35deg);
    opacity: 0.75;
  }
}
@keyframes scan-close {
  0% {
    transform: rotate(35deg);
    opacity: 0.75;
  }
  100% {
    transform: rotate(90deg);
    opacity: 0;
  }
}
@keyframes scan {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
